import { useRef } from "react";
import MyContext from "./MyContext"


export default (props) => {

  const textRef = useRef();
  return (
    <MyContext.Consumer>
      {
        (context) => {
          //  ({addMsg}) => { 可以直接解构使用
          // console.log(context);//{list: Array(2), addMsg: ƒ}
          // Consumer里面，所有的元素，都必须卸载callback的return里面。不能再callback外面，添加其他react元素。
          return (
            <>
              <div>
                内容： <input type="text" ref={textRef} />
              </div>
              <button type="button" onClick={() => {
                let v = textRef.current.value;

                // context.addMsg('哈哈哈哈')
                // addMsg(v)
                context.addMsg(v)
                textRef.current.value = "" // 清空输入框
                textRef.current.focus() // 输入框获取焦点
              }}>add msg</button>
            </>
          )
        }
      }
    </MyContext.Consumer>
  )
}